Proposed behaviour

Hover styling in Safari:

Focus and hovered styling in Safari:

Current behaviour

Less than ideal styling currently in Safari:

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

N/A

Testing instructions

Using Safari:

• Navigate to Menu -> Test -> as link with alternate variant.
• Click and hover over the Notification menu-item.
• Focus styling and hover styling should be correctly applied.

On all browsers:

• Check that no regressions have occurred to any button styling in menu-items.